<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node对象</title>
    <style>
        div{
            border:1px solid red;
        }

        #div1{
            width:200px;
            height:200px;
        }
        #div2{
            width:100px;
            height:100px;
        }

        #div3{
            width:100px;
            height:200px;
        }

    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">div</div>
    </div>
    <a id="del" href="javascript:void(0);">删除子节点</a>
    <a id="add" href="javascript:void(0);">添加子节点</a>
<!--    <input type="button" id="del" value="删除子节点">-->
</body>
    <script>
        //1.获取超链接
        var ele1 = document.getElementById("del");
        //2.绑定单击事件
        ele1.onclick = function(){
            var v1 = document.getElementById("div1");
            var v2 = document.getElementById("div2");
            v1.removeChild(v2);
        }



        //1.获取超链接
        var ele2 = document.getElementById("add");
        //2.绑定单击事件
        ele2.onclick = function(){
            var v1 = document.getElementById("div1");
            //给div添加子节点
            //创建div节点
            var v3 = document.createElement("div");
            v3.setAttribute("id","div3");

            v1.appendChild(v3);
        }



        //获取父节点
        var div2 = document.getElementById("div2");
        alert(div2.parentNode);



        /*
            超链接功能
                1.可以被点击，样式
                2.点击后跳转href指定的url

            需求：保留1功能，去掉2功能
            实现：href="javascript:void(0);"
        */
    </script>
</html>